import {useSnapshot} from "@@/exports";
import {CreatePageModel, PageItemType} from "@/models/createPage";
import DragImage from "@/pages/ActivityCreate/components/DragImage";
import DragAward from "@/pages/ActivityCreate/components/DragAward";

export const getItemDom = (type: "drag" | "preview" | "config", item: PageItemType) => {
    switch (item.type) {
        case "image":
            return <DragImage type={type} item={item}/>
        case "award":
            return <DragAward type={type} item={item}/>
    }
}
const Preview = () => {
    let state = useSnapshot(CreatePageModel.state);

    return (
        <div style={{height: "100%", minHeight: "300px", overflow: "auto"}}>
            {state.pageData.map((item) => {
                return <>
                    {item?.id === state.currentItem?.id && <div key={item.id} style={{
                        width: '100%',
                        height: '24px',
                        background: 'rgba(0,0,0,0.3)',
                        position: 'relative',
                        marginBottom: '-24px',
                        display: 'flex',
                        justifyContent: 'right'
                    }}>
                        <div style={{
                            color: '#ffffff',
                            marginRight: '8px'
                        }}>删除
                        </div>
                    </div>}
                    {getItemDom("preview", item)}
                </>
            })}
        </div>
    )
}


export default Preview